<template>
  <div class="app-container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="订单缴费" name="first">
            <el-card class="box-card" shadow="always">
              <el-steps :active="active" finish-status="success" align-center>
                <el-step title="选择服务项目" ></el-step>
                <el-step title="生成订单" ></el-step>
                <el-step title="支付成功" ></el-step>
              </el-steps>
              <el-row :gutter="5">
                <el-divider content-position="left"></el-divider>
              </el-row>
              <el-tabs v-model="activeTab"  tab-position="left" style="height: 500px;">
                <el-tab-pane label="选择服务项目" name="selectService">
                  <order-from @return-value="handleValue" :orderData="orderData"></order-from>
                </el-tab-pane>
                <el-tab-pane v-if="showTab" label="生成订单" name="generateOrder">
                  <create-order @return-value="handleOrder" :orderData="orderData"></create-order>
                </el-tab-pane>
                <el-tab-pane v-if="showPayStatus" label="支付成功" name="paySuccess">
                  <el-card class="payCard">
                    <pay-success :PayAmount="totalAmount" @return-value="handlePay" ></pay-success>
                  </el-card>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="历史订单" name="fourth">
            <pay-record></pay-record>
          </el-tab-pane>
        </el-tabs>
  </div>
</template>

<script>
  import orderFrom from "@/components/order/orderFrom";
  import createOrder from "@/components/order/createOrder";
  import payRecord from "@/components/order/payRecord";
  import paySuccess from "@/components/order/paySuccess";

  export default {
    components: {
      orderFrom,
      createOrder,
      payRecord,
      paySuccess,
    },
    data() {
      return {
        activeTab: 'selectService', // 设置默认选中的标签页
        tabs: [
          {
            key: 'selectService',
            title: '选择服务项目',
            componentName: 'orderFrom'
          },
          {
            key: 'generateOrder',
            title: '生成订单',
            componentName: 'createOrder'
          }
        ],
        active: 0,
        activeName: 'first',
        form:{
          customerName:null,
        },
        orderFrom:{},
        showTab:false,
        showPayStatus:false,
        title:null,
        ruleForm:{
        },
        elderForm:{
        },
        priceList:{},
        nurseList:{},
        orderData:{},
        totalAmount:0,
      }
    },
    created() {

    },
    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleValue(value) {
        // 接收来自子组件的数值
        if (value != null) {
          let data = value;
          let nurseContent = "";
          data.nurseContent.forEach(item => {
            nurseContent = nurseContent + item.nurseName + ":" + item.nursePrice + ","
          })
          nurseContent.slice(0, -1);
          data.nurseContent = nurseContent;
          this.orderData = data;
          this.showTab = true;
          this.activeTab = "generateOrder";
        }
        this.next();
        console.log(this.active)
        console.log(this.orderData)
      },
      handleOrder(value){
        this.totalAmount = value;
        console.log(value)
        this.next();
        setTimeout(() => {
          this.showPayStatus = true;
          this.activeTab = "paySuccess";
        }, 500);
      },
      handlePay(){
        this.next();
        setTimeout(() => {
          this.showPayStatus = false;
          this.showTab = false;
          this.activeTab = "selectService";
          this.next();
        }, 1000);

      }
    }
  }
</script>
<style>
  .box-card {
    /*height: 100vh;*/
  }
</style>
